<template>
  <a-modal class="common-modal" :title="$t('other.selectTimeFrame')" :footer="null" :width="550" :scroll="{ y: 580 }" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="loading">
      <a-col span="12">
        <a-form layout="inline" >
          <a-form-item :label="$t('other.intervalOfTime')"  class=" ml-15 mt-15" :rules="[{ required: true, message: $t('other.intervalOfTime') }]">
            <a-select v-model:value="interval" allowClear :options="minArr" @change="selectMin" :placeholder="$t('common.pleaseSelect')">
            <!--<a-select v-model:value="interval" allowClear :options="minArr" :disabled="!hourInterval" @change="selectMin" :placeholder="$t('common.pleaseSelect')">-->
            </a-select>
          </a-form-item>
        </a-form>
      </a-col>

      <div style="height: 580px; overflow-y: scroll;">
        <header class="edit-other-header">
          <div >{{ $t('common.sequenceNo') }}</div>
          <div ><span>{{ $t('other.timeFrame') }}</span></div>
          <div >
            <a-checkbox v-model:checked="checkedAllStart" @change="onCheckedAllStart"> {{ $t('other.showOrNot') }}</a-checkbox>
            <!--<a-button size="small" type="primary" ghost   @click="onCheckedAllStart">是否显示</a-button>-->
          </div>
        </header>
        <div class="edit-other-contents" v-for="(item,index) in dateArray" :key="index">
          <div> <span>{{ index+1 }}</span> </div>
          <div> <span>{{ item.label }}</span> </div>
          <div >
            <a-checkbox v-model:checked="item.checked" ></a-checkbox>
          </div>
        </div>
      </div>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{ $t('common.ok') }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>
<script setup>
import {  nextTick, ref } from 'vue'
import {   minArr } from "./config.js"
import {message} from "ant-design-vue";
// import {cloneDeep} from "lodash";
// import i18n from '@/locales/index'
// const { t } = i18n.global
const emits = defineEmits(['ok'])
// import { pick } from 'lodash'
let visible = ref(false)
let confirmLoading = ref(false)
let loading = ref(false)
let checkedAllStart= ref(false)
let dateArray = ref([]) // 时间段
let hourInterval = ref({})
let  interval = ref(60)

const selectMin = (val ) => {
  if (!hourInterval.value) {
    message.warn('请选择时间')
    return
  }
  let start = hourInterval.value[0] *1
  let end = hourInterval.value[1] *1 +1
  let min = end - start
  if ( min <=0) {
    message.warn('时间段不能重复')
    return
  }
  setArray(start,end,val)
}

// 构造时间段
const setArray = (s,e ,val) => {
  let start = s
  let end = e
  let count = val
  let hourLength = end - start
  let remainder = (hourLength * 60 ) % count
  let times =  Math.trunc((hourLength * 60 ) / count)
  let t = count
  let h = start
  let m = count
  let str0 = h + ":" + "00"
  dateArray.value = []

  for (let i=0;i<times;i++){
    if (m == 60){
      h+=1
      m = "00"
    }
    const str1 = h + ":" + m
    dateArray.value.push({  label:str0 + "-" +str1,value:str0 + "-" +str1,checked:false})
    str0 = str1
    t+=count
    m = t%60 ? t%60  : "00"
    h = start +  Math.trunc(t/60)
  }
  if (  remainder> 0) {
    dateArray.value.push({  label:str0 + "-" +end + ":00",value:str0 + "-" +end + ":00",checked:false})
  }
}
// 全选
const onCheckedAllStart = async () => {
  dateArray && dateArray.value.forEach(item=>{
    item.checked = checkedAllStart.value
  })
}
const open = async (val,timeValue,timeList) => {
  hourInterval.value = val.min
  interval.value = timeValue?timeValue : 60
  if (timeList.length > 0 ){
    dateArray.value = timeList
  }else{
    await selectMin(60)
  }
  await initModal()
  await nextTick()
}
const handleOk = async () => {
  emits('ok',dateArray.value ,interval.value)
  visible.value = false
}
const initModal = async () => {
  visible.value = true
  checkedAllStart.value = false
}
const handleCancel = () => {
  visible.value = false
}
defineExpose({
  open
})
</script>